<template>
  <div class="container">
    <div class="nav flex flex-row flex-x-center flex-y-center">
      <div class="item flex-x-center flex-y-center"  data-id=0 :class="[active==0 ? 'active' : '']"  @click='navtab(0)'>综合</div>
      <div class="item flex-x-center flex-y-center" v-bind:class="[active==1 ? 'active' : '']" data-id=1 v-on:click='navtab(1)'>最新</div>
      <div class="item flex-x-center flex-y-center" v-bind:class="[active==2 ? 'active' : '']" data-id=2 v-on:click='navtab(2)'>价格</div>
      <div class="item flex-x-center flex-y-center" v-bind:class="[active==3 ? 'active' : '']" data-id=3 v-on:click='navtab(3)'>销量</div>
      <div class="item flex-x-center flex-y-center" v-bind:class="[active==4 ? 'active' : '']" data-id=4 v-on:click='navtab(4)'>筛选</div>
    </div>
    <div class="good-list" @scroll="scrollHandler" ref='scroll'>
      <div v-for="(good,index) in goods_list" :key="index">
        <div class="good-item flex-col flex-x-center flex-y-center" v-if='index==2'>
          <div class='flex-row flex-x-center flex-y-center'>
            <div style='width:1.5rem;height:1px;background:#b3b3b3;'></div>
            <div class='goods-select-item mg-r-l' style=''>精选</div>
            <div style='width:1.5rem;height:1px;background:#b3b3b3;'></div>
          </div>
          <div class='flex-row  flex-y-center' style='flex-wrap:wrap;justify-content:space-around;'>
            <div v-for="item,index in data_select" class='goods-select-btn'>{{item.name}}</div>
          </div>
          <div>
          </div>
        </div>
        <div class="good-item" @click="shangpinxiangqing(1)">
          <img src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
          <div class="info flex flex-col">
            <div class="title">{{good.name}}</div>
            <div class="flex flex-row">
              <div class="flex-grow-1 moneyColor">租金：{{good.price}}</div>
              <div class="flex-grow-0 moneyColor">押金：{{good.deposit}}</div>
            </div>
            <div class="flex flex-row">
              <div class="flex-grow-1">人气数{{good.sales}}</div>
              <div class="flex-grow-0 subtit">参考价：<span>{{good.sales}}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shaixuan pd" v-if="shaixuanShow">
     <div class="yanse bd-bottom">
       <div class="title">颜色</div>
       <div class="pd-t-b"><span class="type mg-r">黑色</span><span class="type acitive">白色</span></div>
     </div>
      <div class="yanse bd-bottom mg-t">
       <div class="title">尺码</div>
       <div class="pd-t-b"><span class="type  mg-r">L</span><span class="type active  mg-r">XL</span><span class="type acitive  mg-r">XXL</span><span class="type acitive">XXXL</span></div>
     </div>
     <div class="yanse bd-bottom mg-t">
       <div class="title">款式</div>
       <div class="pd-t-b"><span class="type mg-r">婚纱</span></div>
     </div>
      <div class="yanse bd-bottom mg-t">
       <div class="title">租金</div>
       <div class="pd-t-b flex flex-row flex-y-center">
         <input class="flex-grow-1 price" placeholder="最低价"/> <div class="line mg-r-l flex-grow-0"></div> <input  class="flex-grow-1 price" placeholder="最高价"/>
       </div>
     </div>
     <div class="pd-t-b flex-end">
       <button class="btn reset">重置</button><button class="btn conf" @click="confirmSelect">确认</button>
     </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shaixuanShow:false,
      active: 1,
      data_select:[
  {
    'name': '时尚',
    'url': 'shishang'
  },
  {
    'name': '公司年会',
    'url': 'shishang'
  },
  {
    'name': '修身',
    'url': 'shishang'
  },
  {
    'name': '时尚',
    'url': 'shishang'
  },
  {
    'name': '时尚',
    'url': 'shishang'
  },
  {
    'name': '时尚',
    'url': 'shishang'
  },
  {
    'name': '时尚',
    'url': 'shishang'
  },
  {
    'name': '时尚',
    'url': 'shishang'
  }
],
      goods_list: [{
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },

      ]

    }
  },
  methods: {
    shangpinxiangqing(id){
       this.$router.push({path:'/shangpinxiangqing?id='+id});
    },
    scrollHandler(e) {
      // 监听滚动到底部
      let scroll = this.$refs.scroll;
      // console.log(this.$refs.scroll.scrollTop);
      // console.log(this.$refs.scroll.scrollHeight);
      // console.log(this.$refs.scroll.offsetHeight);
      if (scroll.scrollTop >= (scroll.scrollHeight - scroll.offsetHeight)) {
        this.$message({
          message: '滚动到底部了！',
          type: 'warning'
        });
      }
    },
    navtab(index) {
      if (index == 4) {
        this.shaixuanShow = true;
      } else {
        this.active = index;
      };
    },
    //确认筛选
    confirmSelect(){
      this.shaixuanShow = false;
    }
  }
}

</script>
<style lang="less" scoped>
.container {
  background-color: #eee;
}

.nav {
  background-color: #fff;
  height: 2rem;
  width: 100%;
  .item {
    height: 100%;
    width: 100%;
  }
  .active {
    color: #F75B93;
    border-bottom: 1px solid #F75B93;
  }
}

.good-list {
  position: fixed;
  overflow-y: auto;
  left: 0;
  width: 100%;
  top: 2rem;
  bottom: 2.5rem;
  .good-item {
  	.goods-select-btn {
	  width: 4rem;
	  height: 1rem;
	  font-size: .7rem;
	  line-height: .7rem;
	  color: #333;
	  background-color: #fff;
	  border-radius: .2rem;
	  text-align: center;
	  margin: .3rem 0;
	}
    width: 48%;
    margin: .3rem 1%;
    float: left;
    height: 13rem;
    background-color: #fff;
    .info {
      padding: .3rem;
      .title {
        font-size: .8rem;
      }
      span {
        text-decoration: line-through;
      }
    }

    img {
      width: 100%;
      height: 8rem;
    }
  }
}
.shaixuan{
  position:fixed;
  bottom:0;
  top:0;
  left:0;
  width:100%;
  background-color:#fff;
  z-index:99;

  .type{
  display:inline-block;
  background-color:#eee;
  height:2rem;
  line-height:2rem;
  padding:0 1rem;
}
.line{
  height:1px;
  width:2rem;
  background-color:#000;
}
.active{
  background-color:#F75B93;
  color:#fff;
}
.price{
  height:2rem;
  line-height:2rem;
  border:none;
  text-align:center;
  background-color:#eee;
  border-radius:1rem;
}
.btn{
  width:4rem;
  border:none;
  color:#fff;
  height:2rem;
  line-height:2rem;
  text-align:center;
}
.conf{
  background-color:#F75B93;
  border-radius:0 1rem 1rem 0;

}
.reset{
  background-color:#eb98c3;
   border-radius:1rem 0 0 1rem;
}



}

</style>
